<template>
    <div>
        <div class="cart-goods" v-for="(cartList,i) in cartLists" :key="i" 
        >
            <div class="cart-goods-input">
                <input type="checkbox" v-model="cartList.choose" @change="chooseGood()"
                >
            </div>
            <div class="cart-goods-img" @click.capture.stop="gotoDetailPage(cartList)">
                <img :src="cartList.img" >
            </div>
            <div class="cart-goods-msg" @click.capture.stop="gotoDetailPage(cartList)">
                <div>{{cartList.title}}</div>
                <div>商铺:{{cartList.shopSeller||"无"}}</div>
                <div>
                    <span>￥{{cartList.price}}</span>
                    <span>￥{{cartList.orgPrice}}</span>
                    <span>X{{cartList.count}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex";
export default {
    props:{
        cartLists:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    methods:{
        chooseGood(){
            this.cartPage.chooseAll=true;//点击之后先全选
            for(let key in this.cartLists){
                if(!this.cartLists[key].choose){//再判断若里面有false再取消全选状态
                    this.cartPage.chooseAll=false;
                    return;
                }
            }
            // this.cartPage.chooseAll=true;//放前面后面都可以
        },
        gotoDetailPage(arg){
            this.$router.push({
                path:"/detail",
                query:arg
            })
        }
    },
    computed:{
        ...mapState(["cartPage"])
    },
    mounted(){
        // console.log(this.cartLists);
    }
}
</script>
<style lang="less" scoped>
.cart-goods{
    width:100%;
    display:flex;
    flex-flow:row nowrap;
    padding:0.1rem 0.1rem 0.1rem 0rem;
    box-sizing:border-box;
    border-bottom:1px solid @gray;
    >.cart-goods-input{
        flex:1;
        display:flex;
        justify-content:center;
        align-items:center;
        >input[type="checkbox"]{
            width:0.4rem;
            height:0.4rem;
        }
    }
    >.cart-goods-img{
        flex:2;
        >img{
            width:100%;
            height:100%;
        }
    }
    >.cart-goods-msg{
        flex:6;
        padding:0.4rem 0rem 0rem 0.1rem;
        box-sizing:border-box;
        div{
            margin-bottom:0.1rem;
        }
        >div:first-child{
            font-size:0.3rem;
            text-indent:0.4rem;
            overflow:hidden;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
            text-overflow:ellipsis;
        }
        >div:nth-child(2){
            color:@gray;
            font-size:0.3rem;
        }
        >div:last-child{
            overflow:hidden;
            >span:first-child{
                font-weight:bold;
            }
            >span:nth-child(2){
                text-decoration:line-through;
                color:@gray;
                font-size:0.28rem;
                padding-left:0.1rem;
            }
            >span:last-child{
                float:right;
            }
        }
    }
}
</style>